/*
 * @description: 寝室视频上传页面入口
 * @Author: along
 * @Date: 2021-03-15
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2021-03-22 09:51:57
 */
<template>
    <div class="zsdx_page">
        <!-- 左侧菜单 -->
        <div class="zsdx_left">
            <div class="header">
                <i class="iconfont icon-logo"></i>
                <span class="header_title">掌上大学</span>
            </div>
            <div class="menu-list-wrap">
                <div
                    v-for="(row,index) in menuList"
                    :key="index"
                    class="menu_item"
                    :style="{backgroundColor: activeName == row.name || activeName == 'uploadInfo' ? 'rgba(24, 144, 255, 1)' : ''}"
                >
                    <i class="iconfont" :class="row.icon" :style="{color: activeName == row.name || activeName == 'uploadInfo' ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 255, 255, 0.6)'}"></i>
                    <span class="menu_title" :style="{color: activeName == row.name || activeName == 'uploadInfo' ? 'rgba(255, 255, 255, 1)' : 'rgba(255, 255, 255, 0.6)'}">{{ row.title }}</span>
                </div>
            </div>
            <div class="userinfo-wrapper">
                <p class="username ellipsis">{{ userinfo.true_name }}</p>
                <el-popover
                    placement="right-end"
                    width="84"
                    trigger="click"
                    popper-class="index-userinfo-popover">
                    <ul>
                        <li @click="handleLogout">退出</li>
                    </ul>
                    <el-button
                        type="text"
                        slot="reference">设置</el-button>
                </el-popover>
            </div>
        </div>
        <div class="zsdx_right">
            <!-- 导航部分 -->
            <div class="__header">
                <div class="header_left">当前位置: </div>
                <router-link
                    v-for="(row,index) in header"
                    :key="index"
                    :to="!!row.path ? row.path : ''"
                    :style="{color: 'rgba(51, 51, 51, 1)'}"
                >
                    {{ row.title }}{{ index === header.length - 1 ? '' : '/' }}
                </router-link>
            </div>

            <!-- 主体内容 -->
            <div class="__main">
                <router-view />
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    components: {
    },
    data() {
        return {
            menuList: [{
                title: '寝室视频上传',
                icon: 'icon-xiaoyuanshipin',
                name: 'Index'
            }],
            activeName: ''
        };
    },
    watch: {
        '$route': {
            handler: 'resetData',
            immediate: true
        }
    },
    computed: {
        ...mapState({
            header: state => state.header.header,
            userinfo: state => state.userInfo.userInfo
        })
    },
    mounted() {
    },
    methods: {
        resetData (to) {
            this.activeName = to && to.name ? to.name : '';
        },
        handleLogout() {
            this.$post('/stuhire/User/logout', {}, (resp) => {
                if (resp.code == 1) {
                    this.$goLogin();
                }
            });
        },
    },
};
</script>

<style lang="less">
.zsdx_page {
    width: 100vw;
    height: 100%;
    // overflow: hidden;
    box-sizing: border-box;
    display: flex;
    overflow: hidden;
    .zsdx_left {
        width: 220px;
        height: 100%;
        background-color: rgba(0, 37, 72, 1);
        display: flex;
        flex-direction: column;
        align-items: center;
        .header {
            width: 220px;
            height: 64px;
            display: flex;
            justify-content: center;
            align-items: center;
            .icon-logo {
                font-size: 32px;
                color: rgba(255, 255, 255, 1);
                margin-right: 10px;
            }
            .header_title {
                color: rgba(255, 255, 255, 0.85);
                font-size: 20px;
            }
        }
        .menu_item {
            width: 220px;
            height: 50px;
            overflow: hidden;
            display: flex;
            align-items: center;
            box-sizing: border-box;
            padding-left: 20px;
            cursor: pointer;
            &:hover {
                background-color: rgba(24,144,255,.2) !important;
            }
            .iconfont {
                color: rgba(255, 255, 255, 0.6);
                font-size: 14px;
            }
            .menu_title {
                color: rgba(255, 255, 255, 0.6);
                font-size: 14px;
                margin-left: 10px;
            }
        }
    }
    .zsdx_right {
        width: calc(100vw - 220px);
        display: flex;
        height: 100%;
        box-sizing: border-box;
        flex-direction: column;
        .__header {
            width: 100%;
            height: 64px;
            display: flex;
            align-items: center;
            background-color: #ffffff;
            .header_left {
                color: rgba(51, 51, 51, 1);
                font-size: 14px;
                margin-left: 32px;
            }
        }
        .__main {
            box-sizing: border-box;
            padding: 12px;
            height: 100%;
            display: flex;
            overflow: hidden;
        }
    }
}
</style>

<style lang="less">
// 全局样式
.el-table__body-wrapper .el-table__body .el-table__row td {
    border-right: none;
}
.el-table__header-wrapper .el-table__header .has-gutter tr th {
    border-right: none;
}
.el-table .el-table_1_column_6  .cell {
    position: relative;
}
.el-range-editor--small .el-range-separator{
    padding: 0 1px !important;
}
.pagination-wrapper {
    .el-pager {
        .number {
            color: rgba(96, 98, 102, 1) !important;
            background-color: #ffffff !important;
        }
        .active {
            color: rgba(32, 160, 255, 1) !important;
            background-color: #ffffff !important;
        }
    }
    .btn-prev, .btn-next {
        background-color: #ffffff !important;
    }
}
.menu-list-wrap {
    flex: 1;
    overflow-x: auto;
}
.userinfo-wrapper {
    padding: 20px 10px 40px;
    font-size: 16px;
    line-height: 22px;
    color: #fff;
    text-align: center;
    background: #002548;
    .username {
        margin-bottom: 12px;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    }

    .el-button--text {
        padding: 0;
        color: #fff;
    }
}
.index-userinfo-popover {
    min-width: auto;

    li {
    cursor: pointer;

    & + li {
        margin-top: 5px;
    }
    }
}
</style>